<template>
  <div class="step_04">
    <el-button @click="easy" size="mini" type="primary" plain
      >简单markup</el-button
    >
    <el-button @click="demo1" size="mini" type="primary" plain
      >自定义markup</el-button
    >
    <el-button @click="demo2" size="mini" type="primary" plain
      >一个矩形一个图片两个文字markup</el-button
    >
    <el-button @click="demo3" size="mini" type="primary" plain
      >mateData定义markup</el-button
    >
    <el-button @click="demo4" size="mini" type="primary" plain
      >群组选择器</el-button
    >
    <el-button @click="demo5" size="mini" type="primary" plain
      >CSS 书写样式</el-button
    >
    <el-button @click="demo6" size="mini" type="primary" plain
      >鼠标点击修改文字</el-button
    >
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph, Shape, Node } from "@antv/x6";
export default {
  data() {
    return {
      graph: null,
      data: {},
    };
  },
  methods: {
    easy() {
      const rect = new Shape.Rect({
        id: "easy",
        x: 10,
        y: 10,
        width: 100,
        height: 50,
        markup: [
          {
            tagName: "rect",
            // selector: "body2",
            selector: "body",
          },
          {
            tagName: "text",
            selector: "label",
          },
        ],
        label: "文字",
        attrs: {
          // 这边改变Rect的markup的时候 是不起作用的

          // 权重 选择器 => 群组 => 标签
          // body2: {
          body: {
            fill: "pink",
          },
          label: {
            text: "蚊子",
            fill: "#fff",
          },
        },
      });
      this.graph.addNode(rect);
    },
    demo1() {
      const customNode = new Node({
        id: "demo1",
        x: 200,
        y: 10,
        width: 100,
        height: 50,
        markup: [
          {
            tagName: "rect",
            selector: "body2",
          },
          {
            tagName: "text",
            selector: "label2",
          },
        ],
        label: "自定义节点2", // 此时设置文字 这里就失效了
        attrs: {
          // 使用自定义Node的时候 属性是一点都没有的 ，要从0 开始定义，否则出不来
          body2: {
            rx: 3,
            ry: 3,
            refWidth: 100,
            refHeight: 100,
          },
          label2: {
            fill: "red",
          },
          text: {
            text: "自定义node", // 文字
          },
        },
      });
      this.graph.addNode(customNode);
    },
    demo2() {
      const customNode = new Node({
        id: "demo2",
        x: 500,
        y: 10,
        width: 100,
        height: 50,
        markup: [
          {
            tagName: "rect",
            selector: "body2",
          },
          {
            tagName: "image",
            selector: "img",
          },
          {
            tagName: "text",
            selector: "label1",
          },
          {
            tagName: "text",
            selector: "label2",
          },
        ],
        label: "自定义节点2", // 此时设置文字 这里就失效了
        attrs: {
          // 使用自定义Node的时候 属性是一点都没有的 ，要从0 开始定义，否则出不来
          body2: {
            rx: 3,
            ry: 3,
            refWidth: 100,
            refHeight: 50,
            fill: "#efdbff",
            stroke: "#9254de",
          },
          image: {
            "xlink:href":
              "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
            width: 16,
            height: 16,
            x: 12,
            y: 12,
          },
          label1: {
            refX: 40,
            refY: 14,
            text: "文字1",
            "text-anchor": "start",
          },
          label2: {
            refX: 40,
            refY: 38,
            text: "文字2",
            "text-anchor": "start",
          },
        },
      });
      this.graph.addNode(customNode);
    },
    demo3() {
      const customNode = {
        id: "demo3",
        x: 500,
        y: 10,
        width: 100,
        height: 50,
        markup: [
          {
            tagName: "rect",
            selector: "body2",
          },
          {
            tagName: "text",
            selector: "label1",
          },
        ],
        // label: "自定义节点2", // 此时设置文字 这里就失效了
        attrs: {
          rect: {
            rx: 3,
            ry: 3,
            refWidth: 100,
            refHeight: 50,
            stroke: "#9254de",
            fill: "#efdbff",
          },
        },
      };

      this.graph.addNode(customNode);
    },
    demo4() {
      const customNode = new Node({
        x: 500,
        y: 10,
        width: 100,
        height: 50,
        markup: [
          {
            tagName: "rect",
            selector: "body2",
          },
          {
            tagName: "image",
            selector: "img",
          },
          {
            tagName: "text",
            selector: "label1",
            groupSelector: "content",
          },
          {
            tagName: "text",
            selector: "label2",
            groupSelector: "content",
          },
        ],
        label: "自定义节点2", // 此时设置文字 这里就失效了
        attrs: {
          // 使用自定义Node的时候 属性是一点都没有的 ，要从0 开始定义，否则出不来
          body2: {
            rx: 3,
            ry: 3,
            refWidth: 100,
            refHeight: 50,
            fill: "#efdbff",
            stroke: "#9254de",
          },
          image: {
            "xlink:href":
              "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
            width: 16,
            height: 16,
            x: 12,
            y: 12,
          },
          label1: {
            refX: 40,
            refY: 14,
            text: "文字1",
            "text-anchor": "start",
          },

          text: {
            fill: "red",
          },
          label2: {
            refX: 40,
            refY: 38,
            text: "文字2",
            // fill: "green",
            "font-size": "22px",
          },
          content: {
            fill: "blue",
          },
        },
      });
      this.graph.addNode(customNode);
    },
    demo5() {
      const customNode = new Node({
        x: 500,
        y: 10,
        width: 100,
        height: 50,
        markup: [
          {
            tagName: "rect",
            selector: "body2",
          },
          {
            tagName: "image",
            selector: "img",
          },
          {
            tagName: "text",
            selector: "label1",
            groupSelector: "content",
          },
          {
            tagName: "text",
            selector: "label2",
            groupSelector: "content",
          },
        ],
        label: "自定义节点2", // 此时设置文字 这里就失效了
        attrs: {
          // 使用自定义Node的时候 属性是一点都没有的 ，要从0 开始定义，否则出不来
          body2: {
            rx: 3,
            ry: 3,
            refWidth: 100,
            refHeight: 50,
            fill: "#efdbff",
            stroke: "#9254de",
          },
          image: {
            "xlink:href":
              "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
            width: 16,
            height: 16,
            x: 12,
            y: 12,
          },
          label1: {
            refX: 40,
            refY: 14,
            text: "文字1",
            "text-anchor": "start",
          },

          text: {
            fill: "red",
          },
          label2: {
            refX: 40,
            refY: 38,
            text: "文字2",
            // fill: "green",
            // "font-size": "22px",
            class: "markupTest05Rect",
          },
          content: {
            fill: "blue",
          },
        },
      });
      this.graph.addNode(customNode);
    },
    demo6() {
      this.graph.addNode({
        x: 160,
        y: 120,
        width: 360,
        height: 120,
        shape: "text-block",
        text: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.`,
        attrs: {
          label: {
            contenteditable: "true",
          },
          body: {
            fill: "#efdbff",
            stroke: "#9254de",
            rx: 4,
            ry: 4,
          },
        },
      });
    },
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1000,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
  },
};
</script>
<style scoped>
#container >>> .markupTest05Rect {
  fill: #2ecc71;
  font-size: 26px;
}
</style>